<template>
	<div style="width: 400px;margin-left: calc(50% - 200px);">
		<form enctype="multipart/form-data" method="post">
			<div id="kom" style="width: 100%; height: 100px;"></div>
			<div>菜品编号:
				<el-input v-model="dish.vid"></el-input>
			</div>
			<div style="margin-top: 30px;">菜品名称:
				<el-input v-model="dish.vname"></el-input>
			</div>
			<div>
				<div style="margin-top: 30px;">菜品菜系:
					<el-select placeholder="请选择" v-model="dish.vtypeid.vtypeid" >
						<el-option v-for="choice in datas" :key="choice.vtypeid" :label="choice.vtypename" :value="choice.vtypeid"></el-option>
					</el-select>
				</div>
			</div>
			<div style="margin-top: 30px;">菜品售价:
				<el-input v-model="dish.vprice"></el-input>
			</div>
			<div style="margin-top: 30px;">菜品会员价:
				<el-input v-model="dish.vipprice"></el-input>
			</div>
			<div style="margin-top: 30px;">菜品封面:
				<div id="" style="width: 400px;height: 40px; background-color: white;border-radius: 3px; line-height: 40px;">

					<input type="file" ref="photo" name="photo"></input>

				</div>
			</div>
		</form>
		<div style="text-align: center;margin-top: 50px;">
			<el-button @click='tj' type="danger">提交</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				datas: [],
				dish: {
					"vid": '',
					"vname": '',
					vtypeid: {
						"vtypeid": ''
					},
					"vprice": '',
					"vipprice": '',
				}
			}
		},
		created: function() {
			this.querytype();
		},
		methods: {
			tj: function() {
				let formData = new FormData();
				console.log(this.dish.vtypeid.vtypeid)
				formData.append("vpicture", this.$refs.photo.files[0]);
				formData.append("vid", this.dish.vid);
				formData.append("vname", this.dish.vname);
				formData.append("vtypeid", this.dish.vtypeid.vtypeid);
				formData.append("vprice", this.dish.vprice);
				formData.append("vipprice", this.dish.vipprice);
				console.log(this.$refs.photo.files[0])
				this.$http.post('http://localhost:8080/OrderSystemServer/order/veg/add', formData)
					.then((response) => {
						console.log(response);
						if(response.data.isOK)
					{
						this.$message({
									type: 'success',
									message: '添加成功'
								});
					}
					else{
						this.$message({
									type: 'error',
									message: '添加失败，可能菜品编号重复'
								});
					}
					});
			},
			querytype: function() {
				this.$http.get('http://localhost:8080/OrderSystemServer/order/veg/showtype')
					.then((response) => {
						//console.log(response.data);
						this.datas = response.data.body;
					})
			}
		}
	}
</script>

<style>

</style>